<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>绑定样式</title>
        <script type="text/javascript" src="../vue.js"></script>
    </head>
    <style>
        .basic {
            background-color: lightyellow;
            height: 5em;
            width: 5em;
        }
        .normal {

            background-color: dimgray;

        }

        .happy {
            background-color: greenyellow;
        }

        .sad {
            background-color: darkgray;
        }
        .s1{
            background-color: blueviolet;
        }
        .s2{
            background-color: darkslategray;
        }
        .s3{
            background-color: deepskyblue;
        }

    </style>


    <body>
        <div id="root">
            <!--绑定class样式:字符串写法，适用于：样式的类名不确定，需要动态指定-->
            <div class="basic" :class="mood" @click="changeMood()">{{name}}</div>
            <br>
            <!--绑定class样式：数组写法，适用于：要绑定的样式个数不确定，名字也不确定-->
            <div class="basic" :class="arrClass">{{name}}</div>
            <!--绑定class样式：对象写法，适用于：要绑定的样式个数确定，名字确定,但要动态决定用不用-->
            <div class="basic" :class="obj">{{name}}</div>
        </div>

        <script type="text/javascript">
            Vue.config.productionTip = false;
            const vm =new Vue({
                el: '#root',
                data: {
                    name: 'Marina',
                    mood: '',
                    arrClass:['s1','s2','s3'],    //shift和push都非常的方便
                    obj:{
                        s1:false,
                        s2:true
                    }
                },
                methods: {
                    changeMood() {
                        const arr = ['happy', 'sad', 'normal']
                        const index = Math.floor(Math.random() * 3)
                        this.mood = arr[index];
                    }
                }
            })
        </script>
    </body>
</html>